<template>
  <div class="app-container">
    <el-page-header content="详情页面" @back="goBack" />
    <el-row>
      <el-col :span="12">
        <baidu-map
          id="allmap"
          :scroll-wheel-zoom="true"
          @ready="mapReady"
        >
          <bm-marker :position="point" animation="BMAP_ANIMATION_BOUNCE" />n
        </baidu-map>
      </el-col>
      <el-col :span="12">
        <el-timeline :reverse="true">
          <el-timeline-item v-for="(log, index) in logList" :key="index" :timestamp="log.time" placement="top">
            <el-card>
              <p>位置： {{ log.position }}</p>
              <p>状态： {{ log.status }}</p>
              <p>负责人：{{ log.managerName }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getLogList } from '@/api/ticket'
import { getLocation } from '@/api/map'

export default {
  name: 'TicketInfo',
  data() {
    return {
      point: '',
      logList: [
        {
          logId: '',
          ticketId: '',
          managerId: '',
          managerName: '',
          status: '',
          position: '',
          time: ''
        }
      ],
      param: {
        ticketId: '400019'
      },
      mapParams: {
        address: '广东省广州市天河区华南农业大学第四教学楼',
        ak: 'U0le8evPvBkGwGeETzPolS8vWQ8m6UHy',
        output: 'json'
      }
    }
  },
  created() {
    this.getLogs()
    this.getLocation()
  },
  methods: {
    getLogs() {
      const param = {
        ticketId: this.$route.params.id
      }
      console.log(param)
      getLogList(param).then(response => {
        const { content } = response
        this.logList = content
      })
    },
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(113.27, 23.13)
      map.centerAndZoom(this.point, 12)
    },
    getLocation() {
      getLocation(this.mapParams).then(response => {
        console.log(response)
      })
    },
    goBack() {
      // window.history.back()
      this.$router.push('/ticket/ticketList')
    }
  }
}
</script>

<style scoped>
 .map {
   width: 600px;
   height: 500px;
   background-color: #20a0ff;
 }
 #allmap{
   height: 500px;
   width: 600px;
   margin: 0 auto;
 }

</style>
